<!DOCTYPE HTML>
<html>
<head>
<title>tiling</title>
<!--

-->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta content="width=device-width; initial-scale=1.0;  maximum-scale=1.0; user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
	body { padding:0px; margin:0px; color: white; background-color: black; }
	input { 
		font-size:16px;
		padding: 0px;
	}
	* {font-family: sans-serif}
	form { padding:0px; margin:0px; }
</style>
<script src="../../lib/canvas.js"></script>
<script>

	function init() {
		canvas_init();
		window.onresize = on_resize;
		on_resize();
	}
	function console_clear() {
		var c = document.getElementById("console");
		c.innerHTML = '';
	}

	function status_clear() {
		var c = document.getElementById("status");
		c.innerHTML = '';
	}

	function status_update(s) {
		var c = document.getElementById("status");
		var o = "" + s;
		o.replace(/&/, '&amp;');
		o.replace(/</, '&lt;');
		o.replace(/>/, '&gt;');
		o.replace(/'/, '&apos;');
		o.replace(/"/, '&quot;');
		c.innerHTML = o;
	}

	function console_log(s) {
		var c = document.getElementById("console");
		var o = "" + s;
		o.replace(/&/, '&amp;');
		o.replace(/</, '&lt;');
		o.replace(/>/, '&gt;');
		o.replace(/'/, '&apos;');
		o.replace(/"/, '&quot;');
		c.innerHTML += o + '<br />';
	}

	function on_resize() {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight - 5;
		ctx.globalCompositeOperation = 'lighter';

		//set_viewport(0, 0, 60);
		draw_all_bars(60, 10);
	}

	function draw_all_bars(d, n) {
		for (var i = 0; i < 5; ++i) {
			draw_bars(2 * i * Math.PI / 5, d, n);
		}
	}

	function draw_bars(theta, d, n) {
		draw_bar(theta, d, 0);
		for (var i = 1; i <= n; ++i) {
			draw_bar(theta, d, i);
			draw_bar(theta, d, -i);
		}
	}

	function draw_bar(theta, d, i) {
		var b = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height) / 2;
		ctx.save();
		ctx.lineWidth = 1;
		ctx.strokeStyle = rainbow_color(.5 + i / 12);
		ctx.translate(canvas.width / 2, canvas.height / 2);
		ctx.rotate(Math.PI / 2 + theta);
		ctx.beginPath();
		ctx.moveTo(i * d, -b);
		ctx.lineTo(i * d, b);
		ctx.stroke();
		ctx.restore();
	}

</script>
</head>
<body onload="init()">
	<canvas id="canvas" class="canvas"  width="320" height="280"></canvas>
	<!--
		<form action="javascript:" method="get">
			<span id="status"></span>
		</form>
	<div id="console"></div>
	-->
</body>
</html>
